import { StyleSheet, Text, View, FlatList, StatusBar, Image, Pressable, Linking } from 'react-native';
import React, { useCallback, useState } from 'react';
import LinearGradient from 'react-native-linear-gradient';
import { useNavigation, useFocusEffect } from '@react-navigation/native';
import { useTranslation } from 'react-i18next';
import { ItemSeparator, ContentStatus } from '~/components';
import { useBlockBackHandler, useBindDeviceList, useDeviceType } from '~/common';
import { isIos, px2dp, scale, width } from '~/utils/px2dp';
import { getUserListByDoctor } from '~/api/doctor';
import { userStore } from '~/store';
import { getAge } from '~/utils/formatDate';

export default function DoctorScreen() {
    const { t } = useTranslation();
    useBlockBackHandler();
    useBindDeviceList();
    useDeviceType();
    const navigation: any = useNavigation();
    const [userList, setUserList] = useState([]);
    const getData = () => {
        getUserListByDoctor({
            doctor_phone: userStore.me.email,
        }).then((res) => {
            setUserList(res.data);
        });
    };
    useFocusEffect(
        useCallback(() => {
            getData();
        }, []),
    );
    const callPhone = (mobile) => {
        Linking.openURL(`tel:${mobile}`);
    };
    const remoteDevice = (row) => {
        navigation.navigate('DoctorRemote', { userInfo: row });
    };
    const switchUser = () => {
        userStore.selectRole('Main');
        navigation.navigate('Main');
    };
    const renderItem = ({ item, index }) => {
        return (
            <View style={[styles.listItem, styles.row, styles.between]}>
                <View style={[styles.row]}>
                    <Image
                        resizeMode="contain"
                        style={styles.avatar}
                        source={{
                            uri: item.wx_head_portrait
                                ? item.wx_head_portrait
                                : 'https://bjy.oss-cn-shenzhen.aliyuncs.com/pic/20230413/3041681348866.png',
                        }}
                    />
                    <View style={{ marginLeft: px2dp(12) }}>
                        <Text style={styles.userName}>{item?.armarium_science_user_name || '用户'}</Text>
                        <View style={styles.row}>
                            {/* <Pressable style={styles.row} onPress={() => callPhone(item.armarium_science_user_mobile)}>
                                <Image
                                    style={styles.icons}
                                    source={{
                                        uri: 'https://bjy-crmeb.oss-cn-shenzhen.aliyuncs.com/attach/2023/11/4e62d202311061625351306.png',
                                    }}
                                />
                                <Text style={styles.t1}>{item.armarium_science_user_mobile}</Text>
                            </Pressable> */}
                            <View style={[styles.row, { marginLeft: px2dp(32) }]}>
                                <Image
                                    style={styles.icons}
                                    source={{
                                        uri: 'https://bjy-crmeb.oss-cn-shenzhen.aliyuncs.com/attach/2025/02/cfd3d202502221525008152.png',
                                    }}
                                />
                                <Text style={styles.t1}>{getAge(item.armarium_science_user_birthday)}</Text>
                            </View>
                        </View>
                    </View>
                </View>
                <Pressable style={styles.bt} onPress={() => remoteDevice(item)}>
                    <Text style={styles.btText}>{t('doctor.t6')}</Text>
                </Pressable>
            </View>
        );
    };
    return (
        <View style={styles.container}>
            <StatusBar translucent backgroundColor="transparent" />
            <LinearGradient
                style={styles.linearGradient}
                colors={['rgba(37, 200, 200, 0.59)', '#fff']}
                start={{ x: 0, y: 0 }}
                end={{ x: 0, y: 1 }}>
                <View style={[styles.between, styles.nav]}>
                    <Text style={styles.optionsStyle}>{t('doctor.t7')}</Text>
                    <View style={styles.row}>
                        <Pressable style={styles.switchUser} onPress={switchUser}>
                            <Text>{t('doctor.t27')}</Text>
                        </Pressable>
                        {/* <Pressable onPress={singOut}>
                            <Icon name="power" size={px2dp(40)} color={'#FF6430'}></Icon>
                        </Pressable> */}
                    </View>
                </View>
            </LinearGradient>
            <FlatList
                contentContainerStyle={styles.contentStyle}
                showsVerticalScrollIndicator={false}
                data={userList}
                keyExtractor={(item: any) => item.id}
                renderItem={renderItem}
                ListEmptyComponent={() => <ContentStatus status="empty" source={{ title: t('doctor.t46') }} />}
                ItemSeparatorComponent={() => {
                    return <ItemSeparator />;
                }}
            />
        </View>
    );
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
    },
    row: {
        flexDirection: 'row',
        alignItems: 'center',
    },
    between: {
        justifyContent: 'space-between',
    },
    linearGradient: {
        alignItems: 'flex-start',
        justifyContent: 'flex-end',
        alignSelf: 'flex-start',
        width: '100%',
        paddingTop: isIos() ? '18%' : '14%',
        paddingHorizontal: px2dp(24),
    },
    header: {
        zIndex: 1,
    },
    optionsStyle: {
        color: '#111111',
        fontSize: scale(34),
        fontWeight: 'bold',
    },
    contentStyle: {
        flexGrow: 1,
        marginTop: px2dp(32),
        marginHorizontal: px2dp(24),
    },
    listItem: {
        backgroundColor: '#fff',
        borderRadius: px2dp(22),
        padding: px2dp(24),
        marginBottom: px2dp(24),
    },
    userName: {
        color: '#1A1A1A',
        fontSize: scale(32),
        fontWeight: 'bold',
        marginBottom: px2dp(12),
    },
    avatar: {
        width: px2dp(120),
        height: px2dp(120),
    },
    icons: {
        width: px2dp(30),
        height: px2dp(30),
        marginRight: px2dp(12),
    },
    t1: {
        color: '#626262',
        fontSize: scale(24),
    },
    bt: {
        backgroundColor: '#25C4CD',
        paddingHorizontal: px2dp(22),
        paddingVertical: px2dp(12),
        borderRadius: px2dp(50),
    },
    btText: {
        color: '#fff',
        fontSize: scale(26),
    },
    nav: {
        flexDirection: 'row',
        width: width - px2dp(48),
        paddingBottom: px2dp(12),
    },
    switchUser: {
        backgroundColor: '#fff',
        width: px2dp(160),
        height: px2dp(60),
        borderRadius: px2dp(30),
        justifyContent: 'center',
        alignItems: 'center',
        marginRight: px2dp(32),
    },
});
